<template>
  <div class="box">
    <div class="statistics_cont">
      <div class="statistics_left">
        <!-- <div class="statistics_line" :style="{'top':`${top}rem`}"></div> -->
        <el-tabs :tab-position="tabPosition" v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane label="压力曲线" name="1" :lazy="true">
            <Pressure v-if="index == 1" />
          </el-tab-pane>
          <el-tab-pane label="能耗分析" name="2" :lazy="true">
            <Consume v-if="index == 2" />
          </el-tab-pane>
          <el-tab-pane label="水质分析" name="3" :lazy="true">
            <Water v-if="index == 3" />
          </el-tab-pane>
          <el-tab-pane label="历史报警" name="4" :lazy="true">
            <Police v-if="index == 4" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="close" @click="getClose"><i class="el-icon-close"></i></div>
    </div>
  </div>
</template>
<script>
import Pressure from '@/views/ReportStatistics/pressure.vue'
import Consume from '@/views/ReportStatistics/consume.vue'
import Police from '@/views/ReportStatistics/police.vue'
import Water from '@/views/ReportStatistics/water.vue'
export default {
  components: {
    Pressure,
    Consume,
    Police,
    Water
  },
  data() {
    return {
      activeName: '1',
      tabPosition: 'left',
      index: 1,
      tabsData: 2
    }
  },
  methods: {
    calc_top(index){
      if(index == 0){
        document.querySelector('.el-tabs__active-bar').style.top = '0.08rem'
      }else if(index == 1){
        document.querySelector('.el-tabs__active-bar').style.top = '0.65rem'
      }else if(index == 2){
        document.querySelector('.el-tabs__active-bar').style.top = '1.18rem'
      }else if(index == 3){
        document.querySelector('.el-tabs__active-bar').style.top = '1.75rem'
      }
    },
    moreIndexData(value) {
      this.index = value
      this.activeName = value + ''
      // document.querySelector('.el-tabs__active-bar').style.top = `${(value - 1 )* 0.58}rem`
      this.calc_top(value-1)
    },
    handleClick(tab) {
      this.index = Number(tab.index) + 1
      // document.querySelector('.el-tabs__active-bar').style.top = `${tab.index * 0.58}rem`
      this.calc_top(tab.index)

    },
    getClose() {
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background: rgba($color: #000000, $alpha: .5);
  // background: url(@/assets/img/二供大数据展示-压力曲线.png) no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  .statistics_cont {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../../assets/img/yyfx.png) no-repeat center;
    background-size: 100% 100%;
    width: 62.5%;
    height: 72.5%;
    // opacity: .5;
    display: flex;

    .statistics_left {
      margin-top: 0.7rem;
      position: relative;

      .statistics_line {
        position: absolute;
        left: 0.4rem;
        top: 0.13rem;
        width: 0.03rem;
        height: 0.16rem;
        background: linear-gradient(0deg, #94C5F5, #FFFFFF);
        border-radius: 2px;
        transition: 0.3s all ease-in-out;
      }
    }

    .close {
      position: absolute;
      right: 2%;
      z-index: 100;
      top: 4%;
      cursor: pointer;
      display: flex;

      i {
        font-size: 0.4rem;
        color: #fff;
      }
    }
  }
}
.el-tabs--left .el-tabs__active-bar.is-left{
  top: 0.08rem ;
}
</style>